<template>
  <!-- 查询表单 -->
  <el-form
    ref="formSearchRef"
    label-width="100px"
    :inline="true"
    :model="formSearch"
    class="data-grid-search-form"
  >
    <el-row>
      <el-col :lg="6" :md="8" :sm="12" :xs="24">
        <el-form-item :label="t('searchValue.category')" prop="isbn">
          <el-input v-model="formSearch.category" clearable> </el-input>
        </el-form-item>
      </el-col>
      <el-col :lg="6" :md="8" :sm="12" :xs="24">
        <el-form-item :label="t('searchValue.searchValue')" prop="author">
          <el-input v-model="formSearch.searchValue" clearable> </el-input>
        </el-form-item>
      </el-col>
      <el-col :lg="6" :md="8" :sm="12" :xs="24">
        <el-form-item style="float: right">
          <el-button :icon="Search" type="primary" @click="handleSearch">{{
            t("common.searchButton")
          }}</el-button>
          <el-button :icon="RefreshLeft" @click="handleResetFields">{{
            t("common.resetButton")
          }}</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <data-grid
    ref="dataGridRef"
    id="admin-publication-grid"
    row-key="publicationId"
    defaultSort="descending"
    defaultSortBy="createTime"
    :request="handleLoadGrid"
    :columns="state.columns"
  >
  </data-grid>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import DataGrid from "@/components/DataGrid.vue";
import { Plus, Search, Share, RefreshLeft } from "@element-plus/icons-vue";
import utils from "../../../utils/utils";
import apiCms from "../api/cms";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
// 变量必须和属性 ref 的值相同
const formSearchRef = ref();
const dataGridRef = ref();

// 查询区域表单数据
const formSearch = reactive({
  category: "",
  searchValue: "",
});

const state = reactive({
  // 表格列配置，大部分属性跟el-table-column配置一样
  columns: [
    {
      title: () => t("searchValue.category"),
      field: "category",
      sortable: false,
      resizable: true,
      width: 150,
    },
    {
      title: () => t("searchValue.searchValue"),
      field: "searchValue",
      sortable: true,
      resizable: true,
    },
    {
      title: () => t("log.createTime"),
      field: "createTime",
      sortable: true,
      resizable: true,
      width: 180,
    },
  ],
  row: null,
});

// 加载数据
const handleLoadGrid = async (params: any) => {
  // params 是从表格组件接收的，包含分页和搜索字段，需要补充 query 查询条件信息
  let query = utils.serializeArray(formSearch);
  params.query = JSON.stringify(query);
  let data = { rows: [], total: 0 };
  await apiCms
    .querySearchValueListing(params)
    .then((response: any) => {
      data = response.data;
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });
  // 返回数据给表格组件
  return data;
};

// 刷新表格
const handleSearch = () => {
  dataGridRef.value.loadGridData();
};
const handleResetFields = () => {
  formSearchRef.value.resetFields();
};
</script>
<style></style>
